<!DOCTYPE html>
<html lang="en">
<head>
    <title>汇票台账</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/dist/plugins/select2/select2.min.css">
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=86e2297f">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=222aea35">
    <style type="text/css">
        .leftFilter {
            float: left;
            text-align: left;
            margin-right: 5px;
        }

        .clickable {
            color: #489EF1;;
            cursor: pointer;
            text-align: left;
            font-weight: bold;
        }

        .table{
            width: auto;
        }
        .td {
            text-align: center;
        }
        .content {
            padding: 8px 8px 0 8px;
        }
    </style>
</head>
<body>
<section class="content" id="list">
    <iframe id="ifExprot" style="width:0px;height:0px;display: none;" frameborder="0"></iframe>
    <div style="text-align:right;padding-bottom: 10px; height: 35px;">
        <select class="form-control  queryIdSelect pull-left" v-model="companyId" style="width: 190px;margin-right: 10px;height: 25px;line-height: 25px;padding: 0;
    font-size: 12px;" @change="query()">
            <option :value="item.companyId" v-for="(item,i) in companyList" >{{item.companyName}}
            </option>
        </select>
        <input class="pull-left form-control pull-left input-sm" type="text" placeholder="汇票号码"
               v-model="searchParams.debitsNo" style="width: 80px;margin-right: 10px">
        <input class="pull-left form-control pull-left input-sm" type="text" placeholder="项目"
               v-model="searchParams.comeProject" style="width: 80px;margin-right: 10px">
        <input class="pull-left form-control pull-left input-sm" type="text" @focus="showDatePicker($event,'dueDate')"
               placeholder="到期日期" v-model="searchParams.dueDate" style="width: 120px;margin-right: 10px">
        <div class="pull-left" style="width:120px;margin-right:10px;">
            <select v-model="searchParams.endorseFlag" class="form-control"
                    style="height:25px;font-size:12px;line-height:25px;padding-top:0px;padding-bottom:0px;padding-left:6px;">
                <option value="" selected>是否背书</option>
                <option value="0">否</option>
                <option value="1">是</option>
            </select>
        </div>
        <input class="pull-left form-control pull-left input-sm" type="text"
               @focus="showDatePicker($event,'endorseDate')"
               placeholder="背书日期" v-model="searchParams.endorseDate" style="width: 120px;margin-right: 10px">
        <input class="pull-left form-control pull-left input-sm" type="text" placeholder="搜索" v-model="searchParams.key"
               style="width: 80px">
        <button type="button" class="btn oaBtn btn-sm pull-left" style="margin-left: 10px;" @click="query()">查询</button>
        <button type="button" class="btn oaBtn btn-sm pull-right" style="margin-left: 10px;" @click="outDraft()">导出
        </button>
       <!-- <button type="button" class="btn oaBtn btn-sm pull-right" style="margin-left: 10px;" @click="importDraft()">导入
        </button>-->
        <button type="button" class="btn oaBtn btn-sm pull-right" style="margin-left: 10px;" @click="addDraft()">录入
        </button>
    </div>
    <div class="iframeH3" style="width: 50%;float:left;">
        <table class="table table-hover table-bordered">
            <thead>
            <tr>
                <!--<th style="width: 100px;text-align: center">公司名称</th>-->
                <th style="width: 100px;text-align: center" class="tableTitle">操作</th>
                <th style="width: 250px;text-align: center" class="tableTitle">汇票号码</th>
                <th style="width: 150px;text-align: center" class="tableTitle">到期日期</th>
                <th style="width: 80px;text-align: center" class="tableTitle">金额</th>
                <th style="width: 90px;text-align: center" class="tableTitle">收票日期</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,index) in list" v-cloak>
                <!--<td style="text-align: center;white-space:nowrap;overflow:hidden;">吉林清源</td>-->
                <td style="text-align: center;color: #169BD5;;white-space:nowrap;overflow:hidden;">
                    <a style="color: #169BD5; cursor: pointer;" @click="editDraft(item.id)">编辑</a>
                    <a style="color: #169BD5; cursor: pointer;" @click="deleteDraft(item.id)">退票</a>
                </td>
                <td style="text-align: center;;white-space:nowrap;overflow:hidden;">{{item.debitsNo}}</td>
                <td style="text-align: center;white-space:nowrap;overflow:hidden;">{{item.dueDate}}</td>
                <td style="text-align: right;white-space:nowrap;overflow:hidden;">{{fmoney(item.money)}}</td>
                <td style="text-align: center;white-space:nowrap;overflow:hidden;">{{item.invoiceDate}}</td>
            </tr>
            <tr v-cloak>
                <!--<td style="text-align: center;white-space:nowrap;overflow:hidden;">吉林清源</td>-->
                <td style="text-align: center;font-weight: bold;color: #ff0000;white-space:nowrap;overflow:hidden;">
                    合计
                </td>
                <td style="text-align: center;;white-space:nowrap;overflow:hidden;"></td>
                <td style="text-align: center;white-space:nowrap;overflow:hidden;"></td>
                <td style="text-align: center;font-weight: bold;color: #ff0000;">{{fmoney(totalData.totalMoney)}}</td>
                <td style="text-align: center;white-space:nowrap;overflow:hidden;"></td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="iframeH3" style="width: 50%;float:left;overflow-x: scroll">
        <table class="table table-hover table-bordered" style="width: 1960px;">
            <thead>
            <tr>
                <th style="width: 100px;text-align: center" class="tableTitle">出票人</th>
                <th style="width: 150px;text-align: center" class="tableTitle">出票银行</th>
                <th style="width: 150px;text-align: center" class="tableTitle">收入项目</th>
                <th style="width: 100px;text-align: center" class="tableTitle">出票日期</th>
                <th style="width: 70px;text-align: center" class="tableTitle">是否背书</th>
                <th style="width: 100px;text-align: center" class="tableTitle">背书日期</th>
                <th style="width: 100px;text-align: center" class="tableTitle">背书方式</th>
                <th style="width: 100px;text-align: center" class="tableTitle">贴现银行</th>
                <th style="width: 100px;text-align: center" class="tableTitle">贴现息</th>
                <th style="width: 100px;text-align: center" class="tableTitle">贴现金额</th>
                <th style="width: 100px;text-align: center" class="tableTitle">托收银行</th>
                <th style="width: 100px;text-align: center" class="tableTitle">托收是否到账</th>
                <th style="width: 100px;text-align: center" class="tableTitle">托收到账日期</th>
                <th style="width: 100px;text-align: center" class="tableTitle">客户名称</th>
                <th style="width: 70px;text-align: center" class="tableTitle">是否质押</th>
                <th style="width: 70px;text-align: center" class="tableTitle">录入人</th>
                <th style="width: 130px;text-align: center" class="tableTitle">制单日期</th>
                <th style="width: 150px;text-align: center" class="tableTitle">支出项目</th>
                <th style="width: 100px;text-align: center" class="tableTitle">备注</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,index) in list" v-cloak>
                <td style="text-align: center;max-width: 100px;white-space:nowrap;overflow:hidden;">
                    {{item.drawerName}}
                </td>
                <td style="text-align: center;max-width: 150px;white-space:nowrap;overflow:hidden;">
                    {{item.drawerBank}}
                </td>
                <td style="text-align: center;max-width: 150px;white-space:nowrap;overflow:hidden;">
                    {{item.incomeProject}}
                </td>
                <td style="text-align: center;max-width: 100px;white-space:nowrap;overflow:hidden;">
                    {{item.drawerDate}}
                </td>
                <td style="text-align: center;max-width: 70px;white-space:nowrap;overflow:hidden;">
                    <div v-if="item.endorseFlag===0">否</div>
                    <div v-else>是</div>
                </td>
                <td style="text-align: center;max-width: 100px;white-space:nowrap;overflow:hidden;">
                    {{item.endorseDate}}
                </td>
                <td style="text-align: center;max-width: 100px;white-space:nowrap;overflow:hidden;">
                    <div v-if="item.endorseMode=='0'">托收</div>
                    <div v-else-if="item.endorseMode=='1'">贴现</div>
                    <div v-else-if="item.endorseMode=='2'">转出</div>
                    <div v-else></div>
                </td>
                <td style="text-align: center;max-width: 100px;white-space:nowrap;overflow:hidden;">
                    {{item.discountBank}}
                </td>
                <td style="text-align: center;max-width: 100px;white-space:nowrap;overflow:hidden;">
                    {{item.discountInterest}}
                </td>
                <td style="text-align: center;max-width: 100px;white-space:nowrap;overflow:hidden;">
                    {{item.discountMoney}}
                </td>
                <td style="text-align: center;max-width: 100px;white-space:nowrap;overflow:hidden;">{{item.bankName}}
                </td>
                <td style="text-align: center;max-width: 100px;white-space:nowrap;overflow:hidden;">
                    <div v-if="item.collectionArriveFlag===0">否</div>
                    <div v-else-if="item.collectionArriveFlag===1">是</div>
                    <div v-else=""></div>
                </td>
                <td style="text-align: center;max-width: 100px;white-space:nowrap;overflow:hidden;">
                    {{item.collectionArriveDate}}
                </td>
                <td style="text-align: center;max-width: 100px;white-space:nowrap;overflow:hidden;">
                    {{item.customerName}}
                </td>
                <td style="text-align: center;max-width: 70px;white-space:nowrap;overflow:hidden;">
                    <div v-if="item.impawnFlag===0">否</div>
                    <div v-else>是</div>
                </td>
                <td style="text-align: center;max-width: 70px;white-space:nowrap;overflow:hidden;">
                    {{item.inputPerson}}
                </td>
                <td style="text-align: center;max-width: 130px;white-space:nowrap;overflow:hidden;">
                    {{item.createTime}}
                </td>
                <td style="text-align: center;max-width: 150px;white-space:nowrap;overflow:hidden;">
                    {{item.outcomeProject}}
                </td>
                <td style="text-align: center;max-width: 100px;white-space:nowrap;overflow:hidden;">{{item.remark}}</td>
            </tr>

            <tr v-cloak>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td style="text-align: center;font-weight: bold;color: #ff0000;">{{totalData.totalDiscountInterest}}
                </td>
                <td style="text-align: center;font-weight: bold;color: #ff0000;">{{totalData.totalDiscountMoney}}</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="oa-pager text-center" v-cloak>
        共<span id="allCount">{{recordCount}}</span>条记录&nbsp;&nbsp;&nbsp;
        <span id="nowPage">{{pageIndex}}</span>/<span id="allPage">{{pageCount}}</span>&nbsp;&nbsp;&nbsp;
        <span id="first" class="oa-pager-button" @click="pagination('first')">首页</span>
        <span id="prev" class="oa-pager-button" @click="pagination('pre')">上一页</span>
        <span id="next" class="oa-pager-button" @click="pagination('next')">下一页</span>
        <span id="last" class="oa-pager-button" @click="pagination('last')">尾页</span>
    </div>
    <!-- /.box-body -->
</section>
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=8e743a31"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=54c6b89c"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script type="text/javascript" src="/dist/plugins/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<script type="text/javascript" src="/dist/plugins/select2/select2.full.min.js"></script>
<script type="text/javascript">
    Vue.directive('select2', {
        inserted: function (el, binding, vnode) {
            var options = binding.value || {};

            $(el).select2(options).on("select2:select", function (e) {
                el.dispatchEvent(new Event('change', {target: e.target})); //说好的双向绑定，竟然不安套路
            });
        },
        update: function (el, binding, vnode) {
            $(el).trigger("change");
        }
    });
    var app = new Vue({
        el: '#list',
        data: {
            totalData: {
                totalMoney: 0,
                totalDiscountInterest: 0,
                totalDiscountMoney: 0

            },
            currentUser: getCurrentUser(),
            pageIndex: 1,
            pageCount: 1,
            recordCount: 1,
            list: [],
            time: "",
            PerES: false,
            companyId: '',
            companyList: [],
            searchParams: {
                companyId: getCurrentUser().companyId,
                debitsNo: '',
                comeProject: '',
                dueDate: '',
                endorseFlag: '',
                endorseDate: '',
                key: ''
            }
        },
        methods: {
            fmoney:function(s,n){
                n = n > 0 && n <= 20 ? n : 2;
                s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";
                var l = s.split(".")[0].split("").reverse(), r = s.split(".")[1],
                    t = "";
                for (i = 0; i < l.length; i++) {
                    t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");
                }
                return t.split("").reverse().join("") + "." + r;
            },
            query: function () {
                $.wyui.page.queryParams.debitsNo = this.searchParams.debitsNo;
                $.wyui.page.queryParams.comeProject = this.searchParams.comeProject;
                $.wyui.page.queryParams.dueDate = this.searchParams.dueDate;
                $.wyui.page.queryParams.endorseFlag = this.searchParams.endorseFlag;
                $.wyui.page.queryParams.endorseDate = this.searchParams.endorseDate;
                $.wyui.page.queryParams.companyId = this.companyId;
                $.wyui.page.queryParams.key = this.searchParams.key;
                $.wyui.page.queryParams.url = "/bankDebitsFacade/getBankDebitsByCompanyId.json";
                $.wyui.page.getByPage();
            },
            outDraft: function () {
                $('#ifExprot').attr('src', server.ip
                    + "/bankDebitsFacade/getBankDebitsByDownload.json"
                    + '?debitsNo=' + this.searchParams.debitsNo
                    + '&comeProject='+this.searchParams.comeProject
                    + '&companyId='+this.companyId
                    + '&dueDate='+this.searchParams.dueDate
                    + '&endorseFlag='+this.searchParams.endorseFlag
                    + '&endorseDate='+this.searchParams.endorseDate
                    + '&key='+this.searchParams.key)
                ;
                return false;
            },
            pagination: function (auction) {
                if (auction == "first")
                    this.pageIndex = 1;
                else if (auction == "next" && this.pageIndex < this.pageCount)
                    this.pageIndex += 1;
                else if (auction == "pre" && this.pageIndex > 1)
                    this.pageIndex -= 1;
                else if (auction == "last")
                    this.pageIndex = this.pageCount;
                else
                    this.pageIndex = 1;
                this.refresh();
            },
            refresh: function () {
                var that = this;
                $.wyui.postMethod(urlConfig.capital.bankDebits.getBankDebitsByCompanyId, {
                    companyId: getCurrentUser().companyId,
                    requestPage: that.pageIndex,
                    pageSize: 30

                }, function (data) {
                    that.list = data.records;
                    that.pageIndex = data.pageIndex;
                    that.pageCount = data.pageCount;
                    that.recordCount = data.recordCount;
                    $(".iframeH3").scrollTop(0);
                });
            },
            showDatePicker: function (e, type) {
                var that = this;
                WdatePicker({
                    onpicked: function (dp) {
                        that.searchParams[type] = dp.cal.getNewDateStr();
                        return true;
                    },
                    //dateFmt:'yyyy-MM-dd HH:mm'
                });
                $(e.target).blur();
            },
            //  添加账户
            addDraft: function () {
                var that = this;
                url = "/page/reportForm/capital/addDraft.html";
                $.dialog({
                    content: 'url:' + url,
                    title: '录入汇票信息',
                    width: 750,
                    height: 230,
                    max: false,
                    min: false,
                    lock: true
                });
            },
            editDraft: function (id) {
                var that = this;
                url = "/page/reportForm/capital/editDraft.html?id=" + id;
                $.dialog({
                    content: 'url:' + url,
                    title: '编辑汇票信息',
                    width: 750,
                    height: 230,
                    max: false,
                    min: false,
                    lock: true
                });
            },
            //  退票
            deleteDraft: function (id) {
                var that = this;
                url = "/page/reportForm/capital/deleteDraft.html?id=" + id;
                $.dialog({
                    content: 'url:' + url,
                    title: '退票',
                    width: 600,
                    height: 100,
                    max: false,
                    min: false,
                    lock: true
                });
            },
        },

        mounted: function () {
            var that=this;
            if (getCurrentUser().roleName == "应收账款专员" || getCurrentUser().name == "孙强"|| getCurrentUser().name == "靳悦双"||getCurrentUser().name=="曹国玉"||getCurrentUser().name=="谈小中"||getCurrentUser().name=="要晋龙"||getCurrentUser().name=="林恩智") {
                $.wyui.postMethod(urlConfig.system.company.getCompanyList, {}, function (r) {
                    console.log(r)
                    for(var i=0;i<r.length;i++){
                        if(r[i].name=="滚滚向前集团"){
                            r.splice(i, 1);
                        }
                    }
                    for (var i = 0; i < r.length; i++) {
                        r[i].companyId = r[i].id
                        r[i].companyName = r[i].name
                    }
                    that.companyList = r;
                    that.companyId = r[0].id
                }, true);
            } else {
                $.wyui.postMethod(urlConfig.system.user.getCompanyIdsByUserId, {"userId": getCurrentUser().id}, function (r) {
                    that.companyList = r;
                    that.companyId = r[0].companyId
                }, true);
            }
        }
    });


</script>

<script type="text/javascript">
    //配置页面列表查询所需的基本参数
    $.wyui.page.dataUrl = server.ip + urlConfig.capital.bankDebits.getBankDebitsByCompanyId;
    $.wyui.page.queryParams.companyId = app.companyId;
    //    $.wyui.page.queryParams.userId = getCurrentUser().id;
    $.wyui.page.getByPage_callback = function (list) {
        app.list = list;
        app.totalData.totalMoney=0;
        app.totalData.totalDiscountInterest=0;
        app.totalData.totalDiscountMoney=0;
        for (var i = 0; i < list.length; i++) {
            var reportData = list[i];
            console.log(Number(app.totalData.totalMoney),Number(reportData.money))
            app.totalData.totalMoney = Number(app.totalData.totalMoney) + Number(reportData.money);
            app.totalData.totalDiscountInterest = Number(app.totalData.totalDiscountInterest) + Number(reportData.discountInterest);
            app.totalData.totalDiscountMoney = Number(app.totalData.totalDiscountMoney) + Number(reportData.discountMoney);

        }
    };


</script>
<script type="text/javascript">
    function refresh() {
        app.refresh();
    }
</script>
</body>
</html>